import Taro, {Component} from "@tarojs/taro";
import {View, Form, Image, Button, Input, Picker} from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {getAvatar, getRuntime, userSexArr} from '../../utils/common'

import './index.less'
import './user_info_edit.less'
import right from "../../assets/img/right.png";
import icon_79 from "../../assets/img/icon_79.png";

// 编辑资料
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    userSexArr,
    currentSex:2, // 保密
    avatar: icon_79, // 用户显示
    avatarSave: '', // 用户保存
    userInfo:{}
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'编辑资料' })
    this.getUserInfo()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getUserInfo() {
    let { userStore } = this.props.stores
    userStore.getUserInfo({
      callback: res => {
        let currentSex = 2
        if(res.userSex) { currentSex = res.userSex - 1 }
        this.setState({
          userInfo: toJS(res),
          avatar: toJS(res).avatar,
          avatarSave: toJS(res).avatar,
          currentSex
        })
      }
    })
  }

  changePicker(e){
    this.setState({
      currentSex: e.detail.value
    })
  }

  submit(e){
    let { userStore } = this.props.stores
    let { name } = e.detail.value
    let { avatarSave,currentSex } = this.state
    if(!name){ getRuntime().showToast('昵称不能为空~')}
    userStore.modifyUser({
      form: {
        name,
        avatar: avatarSave,
        userSex: currentSex+1
      },
      callback: () => {
        // 重新获取用户信息并缓存
        userStore.getUserInfo({
          callback: res => {
            res.token = getRuntime().getUserInfo().token
            getRuntime().setUserInfo(res) }
        })
        getRuntime().showToast('保存成功,即将返回~')
        setTimeout( () => {
          getRuntime().navigateBack()
        }, 1000)
      }
    })
  }

  changeAvatar(e) {
    Taro.chooseImage({
      sourceType:['album', 'camera'],
      count:1,
    }).then(res => {
      getRuntime().uploadFile([{ file:{path:res.tempFilePaths }}], (url) => {
        this.setState({
          avatar: url[0],
          avatarSave: url[0]
        })
      })
    }).catch(() => {
      getRuntime().showToast('上传文件失败，请稍后重试~')
    })
  }

  render() {
    let { userSexArr,currentSex,avatar,userInfo } = this.state
    return (
      <View className='my-my_edit'>
       <Form onSubmit={this.submit.bind(this)}>
         <View className='header'>
           <Image src={getAvatar(avatar)} className='my-bg' onClick={this.changeAvatar.bind(this)} />
           <View className='list-title'>点击更换头像</View>
         </View>

         <View className='from-wrap'>

           <View className={'item-group'}>
             <View className='input-group'>
               <View className='input-name'>昵称</View>
               <Input className='from-input'  placeholder='未填写昵称' name='name' placeholderStyle={{'font-size': '26px'}} value={userInfo.name} />
             </View>

             <View className='input-group '>
               <View className='input-name'>性别</View>
               <Picker className='input-picker' mode='selector' name={'userSex'}
                       value={userSexArr[currentSex]}
                       range={userSexArr}
                       onChange={this.changePicker.bind(this)} >
                 <View className='tt'>
                   <View className='from-input picker-con' >{userSexArr[currentSex]}</View>
                   <Image className='drop-down-icon' src={right} />
                 </View>
               </Picker>
             </View>
           </View>

         </View>
         <Button className='btn-line-submit' formType={"submit"}>保存</Button>
       </Form>
      </View>
    )
  }
}

export default Company
